import React, { useEffect, useState } from 'react';
import { Table, Button, TablePaginationConfig, notification, Input, Breadcrumb, Switch, Form, Modal, Image, Card, Select } from 'antd'
import { useNavigate } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table'
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { pro_list, pro_detail, pro_getCategory,pro_searchPro,pro_updateFlag,search_list } from '../../../api/api';
interface Props {

}
interface DataType {
    originprice: number;
    sales: number;
    name: string;
    phone: string;
    role: string;
    key: string;
    isseckill: string;
    isrecommend: string;
    issale: string
}
function Sift(props: Props) {
    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'index',
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '图片',//表格列的名字(显示在表格头上)
            dataIndex: 'img1',//数据对应的属性名
            render: (_, record: any, key) => (
                <>
                    <img src={record.img1} alt="" width='100' height='100' />
                </>
            )

        },
        {
            title: '商品名',
            dataIndex: 'proname',
            key: 'role',
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            key: 'brand'
        },
        {
            title: '分类',
            dataIndex: 'category',
            key: 'category'
        },
        {
            title: '折扣',
            dataIndex: 'discount'
        },
        {
            title: '销量',
            dataIndex: 'sales',
            sorter: (a, b) => a.sales - b.sales,
        },
        {
            title: '价格',
            dataIndex: 'originprice',
            key: '_id',
            sorter: (a, b) => a.originprice - b.originprice,

        },
        {
            title:'是否售卖',
            render:(_,record) =>(
                record.issale == '1' ?
                <Switch defaultChecked /> 
                :
                <Switch/>
            )
        },
        {
            title:'是否秒杀',
            render:(_,record:any) =>(
                record.isseckill == '1' ?
                <Switch defaultChecked onChange={()=>{onClickSF(record)}}/> 
                :
                <Switch onChange={()=>{onClickST(record)}}/>
            )
        },
        {
            title:'是否推荐',
            render:(_,record) =>(
                record.isrecommend  == '1' ?
                <Switch defaultChecked onChange={()=>{onClickRF(record)}}/> 
                :
                <Switch onChange={()=>{onClickRT(record)}}/>
            )
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record: any, key) => (
                <>
                    {/* <Switch checkedChildren="推荐" unCheckedChildren="秒杀" defaultChecked /> <br/> */}
                    <Button type='primary' className='detail' onClick={() => { showModal(record) }}>详情</Button>
                </>
            )
        }
    ]


    const { Search } = Input
    const [value,setValue] = useState('')
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [detail, setDetail] = useState<any>({})
    const showModal = (record: any) => {
        pro_detail({ proid: record.proid }).then((res) => {
            console.log(res.data.data[0]);
            setDetail(res.data.data[0])
        })
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //定义动画效果
    var [loading, setLoading] = useState(false)
    var [prolist, setPro] = useState([])
    var [getcateList, setcateList] = useState([])
    var [searchList,setSearch] = useState([])
    var navigate = useNavigate()
    useEffect(() => {
        pro_list().then((res) => {
            console.log(res.data);
            setPro(res.data.data)

        })
        // 搜索关键词列表
        search_list().then((res)=>{
            console.log(res.data);
            
        })
        // 获取分类项
        pro_getCategory().then((res) => {
            // console.log(res.data.data);
            setcateList(res.data.data)
            var option = res.data.data.map((item: any) => {
                var obj = {
                    value: item,
                    label: item
                }
                return obj
            })
            // console.log(option);
            setcateList(option)
        })

        },[])
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
        setValue(value)
    };
    var onSearch = (val:string)=>{
        if(val != ''){
            pro_searchPro({category:value,search:val}).then((res)=>{
                console.log(res.data);
                if(res.data.code == 200){
                    if(res.data.data.length == 0){
                        notification.info({message:'查无此商品'})
                    }else{
                        var list = res.data.data.map((item:any)=>{
                            return{
                               brand:item.brand,category:item.category,
                               desc:item.desc,discount:item.discount,
                               img1:item.img1,isrecommend:item.isrecommend,
                               issale:item.issale,isseckill:item.isseckill,
                               proname:item.proname,sales:item.sales,proid:item.proid 
                            }
                        })
                        setSearch(list)
                    }
                   
                }
            })
        }
    }
     // 修改秒杀状态
     const onClickST = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isseckill',flag:true}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已将商品状态设为秒杀'})
            
        })
    }
    const onClickSF = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isseckill',flag:false}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已关闭商品秒杀状态'})
        })
    }
    // 修改推荐状态
    const onClickRT = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isrecommend',flag:true}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已将商品状态设为推荐'})
        })
    }
    const onClickRF = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isrecommend',flag:false}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已关闭商品推荐状态'})
        })
    }   
    prolist = searchList.length == 0 ? prolist : searchList

    return (
        <div className='shopinfo'>
            {/* <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
                <Breadcrumb.Item>产品管理</Breadcrumb.Item>
                <Breadcrumb.Item>筛选列表</Breadcrumb.Item>
            </Breadcrumb> */}
            <div className="opet">
                <Select
                    defaultValue="手机"
                    style={{ width: 120 }}
                    onChange={handleChange}
                    options={ getcateList }
                />
                <Search style={{ width: 300, marginRight: 20 ,marginLeft: 20 }} placeholder="输入商品名称" enterButton onSearch={onSearch} />
            </div>
            <Modal title="商品详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <div className="detail">
                    <Image
                        width={200}
                        src={detail.img1}
                    />
                    <Card>
                        <p>{detail.desc}</p>
                    </Card>
                </div>
            </Modal>
            {/* 表格组件 */}
            {/* columns 表格每一列如何渲染 */}
            {/* dataSource 表格的数据源 */}
            <Table columns={columns} loading={loading} dataSource={prolist} />
        </div>
    );
}

export default Sift;